<template>
    <view class="page bg-fff">
        <view class="topWrap">
            <image class="topImg bottom-20" src="https://image.srea.org.cn/xcx/find-page-top-bg.jpg" mode="widthFix"></image>
        </view>

        <view class="menusWrap bg-fff">
            <view class="topMenus bottom-20 top-20">
                <view class="topMenuItem flex" v-for="(item, index) in topMenus" :key="index" @click="navRoute(item)">
                    <image class="topImg" :src="item.icon" mode="widthFix"></image>
                    <!-- <view class="title col-4d">{{ item.title }}</view> -->
                </view>
            </view>

            <view class="rowBtn top-30" v-for="(item, index) in menuList" :key="index" @click="navRoute(item)">
                <image class="menuImg" :src="item.icon" mode="widthFix"></image>
                <!-- <view class="title font20 fontBold col-4d">{{ item.title }}</view> -->
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// import { useIndexStore } from '@/store/index';

// const indexStore = useIndexStore();

const topMenus = ref([
    {
        title: '地图找房',
        type: 'map',
        path: '/pages/products/map/index',
        icon: 'https://image.srea.org.cn/xcx/query-tools-menus-map-find-1.png',
    },
    {
        title: '地铁找房',
        type: 'metro',
        path: '/pages/products/metro/index',
        icon: 'https://image.srea.org.cn/xcx/query-tools-menus-metro-find-1.png',
    },
    {
        title: '环线找房',
        type: 'huanXian',
        path: '/pages/products/huan-xian/index',
        icon: 'https://image.srea.org.cn/xcx/query-tools-menus-huan-xian-find-1.png',
    },
]);

const menuList = ref([
    {
        title: 'VR看房',
        type: 'vr',
        path: '/pages/products/vr/index',
        icon: 'https://image.srea.org.cn/xcx/query-tools-menus-vr-find-1.png',
    },
    {
        title: '看房视频',
        type: 'shipin',
        path: '/pages/products/video/index',
        icon: 'https://image.srea.org.cn/xcx/query-tools-menus-video-find-1.png',
    }
]);

// 初始化加载数据
onLoad((options) => {
	uni.$check_and_login()
});

//点击Navs
function navRoute(info){
    uni.navigateTo({
        url: `${info.path}?pageType=${info.type}&type=${info.type}`
    })
}
</script>

<style lang="scss" scoped>
.page {
    min-height: 100vh;
    .topWrap{
        position: relative;
        .topImg{
            width: 100%;
        }
    }
    
    .menusWrap{
        margin: -100rpx 0 0 0;
        padding: 40rpx 28rpx;
        position: relative;
        z-index: 10;
        border-radius: 40rpx;
        .topMenus{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40rpx;
            .topMenuItem{
                flex-direction: column;
                .topImg{
                    width: 100%;
                    border-radius: 24rpx;
                    box-shadow: 28rpx 28rpx 28rpx -28rpx rgba(0,0,0,.36);
                }
            }
        }
    }
    .rowBtn{
        position: relative;
        .menuImg{
            width: 100%;
            border-radius: 14rpx;
            box-shadow: 28rpx 28rpx 28rpx -28rpx rgba(0,0,0,.36);
        }
        .title{
            position: absolute;
            top: 40%;
            left: 40rpx;
        }
    }
}
</style>